<template>
  <div class="sr-container">
    <el-button type="primary" style="margin:20px;" @click="addEnterprise(0)">添加企业</el-button>

    <div style="margin:20px;">
      <p style="display:inline-block;">劳务公司名称：</p>
      <el-input
        v-model="listQuery.companyName"
        placeholder="请输入劳务公司名称搜索"
        size="small"
        style="width:200px"
        class="filter-item"
        @keyup.enter.native="getCompanyListData"
      />
      <p style="display:inline-block;margin-left:2%">负责人名称：</p>
      <el-input
        v-model="listQuery.contacts"
        placeholder="请输入负责人名称"
        size="small"
        style="width:200px"
        class="filter-item"
        @keyup.enter.native="getCompanyListData"
      />
      <p style="display:inline-block;margin-left:2%">联系电话：</p>
      <el-input
        v-model="listQuery.companyPhone"
        placeholder="请输入手机号搜索"
        size="small"
        style="width:200px"
        class="filter-item"
        @keyup.enter.native="getCompanyListData"
      />
      <p style="display:inline-block;margin-left:2%">企业地址：</p>
      <el-input
        v-model="listQuery.companyAddress"
        placeholder="请输入地址搜索"
        size="small"
        style="width:200px"
        class="filter-item"
        @keyup.enter.native="getCompanyListData"
      />
      <el-button
        size="small"
        style="margin-left:3%;"
        class="filter-item"
        type="success"
        icon="el-icon-search"
        @click="getCompanyListData"
      >查询</el-button>
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="companyData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        :row-key="getRowKeys"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" :reserve-selection="true" min-width="50px" align="center"></el-table-column>
        <el-table-column align="center" min-width="200px" label="劳务派遣公司名称">
          <template slot-scope="{row}">
            <span>{{row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="100px" label="负责人姓名">
          <template slot-scope="{row}">
            <span>{{row.contacts}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="300px" label="联系电话">
          <template slot-scope="{row}">
            <span>{{row.tel}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="300px" label="公司地址">
          <template slot-scope="{row}">
            <span>{{row.addr}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="150px">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="handlerdeleteCompany(1,row)">删除</el-button>
            <span>|</span>
            <el-button type="text" size="small" @click="addEnterprise(1,row)">编辑</el-button>
            <span>|</span>
            <el-button type="text" size="small" @click="addEnterprise(2,row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.start"
        :limit.sync="listQuery.length"
        @pagination="getCompanyListData"
      />
      <div style="width:100%;">
        <el-button
          type="primary"
          :disabled="isSelect"
          style="float:right;margin-bottom:40px;margin-top:20px"
          @click="handlerdeleteCompany(3)"
        >批量删除</el-button>
      </div>
    </div>

    <el-dialog append-to-body :visible.sync="deleteVisible" width="20%">
      <p>是否删除该企业？</p>
      <div slot="footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlerdeleteCompany(2)">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="dialogTitle" :visible.sync="addVisible" width="50%" append-to-body>
      <div>
        <el-form>
          <el-form-item :label-width="formItemWidth" label="劳务公司名称:">
            <el-input
              v-model="addCompanyMsg.companyName"
              placeholder="请录入企业名称"
              style="width:250px"
              :disabled="isEdit"
            ></el-input>
          </el-form-item>
          <el-form-item :label-width="formItemWidth" label="劳务公司地址:">
            <el-input
              v-model="addCompanyMsg.companyAddress"
              placeholder="请录入企业地址"
              style="width:250px"
              :disabled="isEdit"
            ></el-input>
          </el-form-item>
          <el-form-item :label-width="formItemWidth" label="联系人:">
            <el-input
              v-model="addCompanyMsg.contacts"
              placeholder="请录入联系人"
              style="width:250px"
              :disabled="isEdit"
            ></el-input>
          </el-form-item>
          <el-form-item :label-width="formItemWidth" label="联系电话:">
            <el-input
              v-model="addCompanyMsg.companyPhone"
              placeholder="请录入企业联系电话"
              style="width:250px"
              :disabled="isEdit"
            ></el-input>
          </el-form-item>
          <el-form-item :label-width="formItemWidth" label="劳务公司简介:">
            <el-input
              v-model="addCompanyMsg.companyInfo"
              placeholder="请录入劳务公司简介"
              type="textarea"
              style="width:70%"
              :disabled="isEdit"
            ></el-input>
          </el-form-item>
          <el-form-item :label-width="formItemWidth" label="劳务公司资质:">
            <template>
              <div
                style="display:flex;align-items:center"
                v-for="(item, index) in imgLayouts"
                :key="index"
              >
                <div v-show="!isEdit">
                  <el-button
                    type="primary"
                    @click="deleteCopy(item)"
                    align="center"
                    style="margin:15px;width:70px;height:70px"
                    v-show="index!=0"
                  >删除</el-button>
                </div>
                <div @click="getIndex(index)">
                  <el-upload
                    v-loading="imgUploadLoading"
                    class="avatar-uploader"
                    action="http://10.0.0.74:8090/uploadImgUrl"
                    :http-request="addCompanyImg"
                    :before-upload="beforeAvatarUpload"
                    :disabled="isEdit"
                    :show-file-list="false"
                  >
                    <div v-if="item.url" class="here">
                      <img :src="item.url" class="avatar" />
                      <span v-show="!isEdit" class="change">更换-图片</span>
                    </div>
                    <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                    <span v-else class="addText">+点击添加图片</span>
                    <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                  </el-upload>
                </div>

                <div v-show="!isEdit">
                  <el-button
                    type="success"
                    @click="copyImg"
                    size="samll"
                    align="center"
                    style="margin:15px;width:70px;height:70px"
                    v-show="index==0"
                  >添加</el-button>
                </div>
              </div>
            </template>
            <el-dialog append-to-body :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" style="float:center">
        <el-button v-show="!isEdit" type="primary" @click="handlerSure">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import {
  deleteCompany,
  dealCompanyMsg,
  getCompanyList,
  getListPage
} from "@/api/dispatchManager";
import { uploadImg } from "@/api/smallRoutine";
import { log } from "util";
export default {
  components: { Pagination },
  created() {
    this.getCompanyListData();
  },
  data() {
    return {
      isShow: false,
      listLoading: true,
      imgUploadLoading: false,
      formItemWidth: "200px",
      total: 0,
      addVisible: false,
      deleteVisible: false,
      //批量删除按钮是否可用
      isSelect: true,
      //是否可以图片上传
      disabled: false,
      //添加和编辑状态可输入;查看状态下不能输入
      isEdit: true,
      //弹窗标题
      dialogTitle: "",
      //企业查询
      listQuery: {
        start: 1,
        length: 10,
        companyName: "",
        companyPhone: "",
        companyAddress: "",
        contacts:'',
        name:''
      },
      //添加企业
      addCompanyMsg: {
        companyName: "",
        companyPhone: "",
        companyAddress: "",
        companyId: "",
        //企业简介
        companyInfo: "",
        contacts:''
      },
      //企业数据
      companyData: [],
      imageUrl: "",
      multipleSelection: [],
      //企业图片
      companyImgList: [],
      fileList: [],
      //删除企业的ids
      deleteIds: [],
      //大图dialog地址
      dialogImageUrl: "",
      //大图dialog
      dialogVisible: false,
      imgLayouts: [{ url: "", key: 0 }],
      imgIndex: 0
    };
  },
  watch: {
    addVisible: function(val, oldVal) {
      if (!val) {
        this.companyImgList = [];
        this.imgLayouts = [{ url: "", key: 0 }];
        this.fileList = [];
      }
    },
    deleteIds: function(value, oldValue) {
      this.deleteIds.length == 0
        ? (this.isSelect = true)
        : (this.isSelect = false);
    }
  },
  methods: {
    //获取企业列表数据
    getCompanyListData() {
      this.listLoading = true;
      var params = {
        pageNum: this.listQuery.start - 1,
        pageSize: this.listQuery.length,
        name: this.listQuery.companyName,
        addr: this.listQuery.companyAddress,
        tel: this.listQuery.companyPhone,
        contacts:this.listQuery.contacts,
      };
      getListPage(params).then(result => {
        console.log(result);
        this.companyData = result.data.content;
        this.total = result.data.totalElements;
          this.listLoading = false;
      });
    },
    //上传企业图片地址
    addCompanyImg(data) {
      this.imgUploadLoading = true;
      const formData = new FormData();
      formData.append("file", data.file);
      uploadImg(formData).then(res => {
        console.log(res);
        this.imgUploadLoading = false;
        this.imgLayouts.forEach((item, index) => {
          if (item.key == this.imgIndex) {
            item.url = res.data.filePath;
          }
        });
        // this.companyImgList.push(res.data);
        console.log(this.imgLayouts);
      });
    },
    //提交添加的企业
    handlerSure() {
      let imgs = [];
      this.imgLayouts.forEach((item, index) => {
        imgs.push(this.imgLayouts[index].url);
      });
      console.log(imgs);

      this.listLoading = true;

      var params = {
        addr: this.addCompanyMsg.companyAddress,
        imgUrl: imgs.join(","),
        name: this.addCompanyMsg.companyName,
        tel: this.addCompanyMsg.companyPhone,
        id: this.addCompanyMsg.companyId,
        introduction: this.addCompanyMsg.companyInfo,
        contacts: this.addCompanyMsg.contacts
      };
      if (this.dialogTitle == "添加企业") {
        dealCompanyMsg("post", params)
          .then(res => {
            console.log(res);
            this.listLoading = false;
            this.addVisible = false;
            this.getCompanyListData();
          })
          .catch(error => {
            this.listLoading = false;
          });
      } else {
        //编辑企业信息
        dealCompanyMsg("put", params)
          .then(res => {
            console.log(res);
            this.listLoading = false;
            this.addVisible = false;
            this.getCompanyListData();
          })
          .catch(error => {
            this.listLoading = false;
          });
      }
    },
    //删除企业
    handlerdeleteCompany(type, row) {
      if (type == 1) {
        //弹窗
        this.deleteVisible = true;
        this.addCompanyMsg.companyId = row.id;
      } else {
        //确定删除
        var params = {
          ids: type == 2 ? [this.addCompanyMsg.companyId] : this.deleteIds
        };
        console.log(this.deleteIds);

        deleteCompany(params).then(res => {
          this.deleteVisible = false;
          this.toggleSelection();
          this.getCompanyListData();
        });
      }
    },
    //查看大图
    handleCompanyImg(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //移除图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.companyImgList.forEach((item, index) => {
        if (item == file.url) {
          this.companyImgList.splice(index);
        }
      });
    },
    // 添加企业0 - 编辑 1- 查看企业信息2
    addEnterprise(type, row) {
      if (type == 0) {
        this.addCompanyMsg = [];
        this.dialogTitle = "添加企业";
        this.isEdit = false;
        this.addVisible = true;
      } else {
        this.addCompanyMsg.companyName = row.name;
        this.addCompanyMsg.companyPhone = row.tel == null ? "" : row.tel;
        this.addCompanyMsg.companyAddress = row.addr;
        this.addCompanyMsg.companyId = row.id;
        this.addCompanyMsg.contacts=row.contacts
        row.introduction == null
          ? (this.addCompanyMsg.companyInfo = "")
          : (this.addCompanyMsg.companyInfo = row.introduction);
        this.imgLayouts.pop();
        var images = row.imgUrl.split(",");
        this.companyImgList = this.companyImgList.concat(images);
        this.companyImgList.forEach((items, index) => {
          this.fileList.push(Object.assign({ url: items }));
          this.imgLayouts.push({ url: items, key: index });
          // this.imgLayouts.push(Object.assign({ url: item, key: index }));
        });
        type == 2
          ? ((this.isEdit = true), (this.dialogTitle = "查看企业信息详情"))
          : ((this.isEdit = false), (this.dialogTitle = "编辑企业信息"));
        this.addVisible = true;
      }
    },
    getRowKeys(row) {
      return row.id;
    },
    handleSelectionChange(val) {
      this.deleteIds = [];
      this.multipleSelection = val;
      this.multipleSelection.forEach(item => {
        this.deleteIds.push(item.id);
      });
    },
    // 取消勾选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //=================
    beforeAvatarUpload(file) {
      return true;
    },
    copyImg() {
      let length = this.imgLayouts.length;
      this.imgLayouts.push({
        url: "",
        key: length
      });
    },
    getIndex(index) {
      this.imgIndex = index;
      console.log(this.imgIndex);
    },
    deleteCopy(item) {
      var index = this.imgLayouts.indexOf(item);
      if (index !== -1) {
        this.imgLayouts.splice(index, 1);
      }
    }
  }
};
</script>
<style>
/* .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  width: 200px;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 12px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 200px;
  display: block;
} */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  width: 200px;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 178px;
  line-height: 200px;
  text-align: center;
}
.addText {
  font-size: 16px;
  color: #8c939d;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 200px;
  height: 178px;
  display: block;
  position: absolute;
  z-index: 0;
}
.here {
  position: relative;
  width: 200px;
  height: 178px;
  display: flex;
}
.change {
  position: absolute;
  z-index: 1;
  align-items: center;
  width: 100%;
  background: black;
  color: white;
  margin-top: 70%;
  opacity: 0.5;
}
</style>